<template>
  <div>
    <pro-table
      ref="proTableInst"
      tableTitle="pro-table演示"
      :columns="columns"
      :query="query"
      :queryProps="{
        labelWidth: 100
      }"
      :request="fetchPageList"
      auto-height
      styleType="four"
    >
      <template #operation>
        <n-space>
          <n-button type="primary">新增</n-button>
          <n-button type="primary" @click="tableReload">手动刷新</n-button>
        </n-space>
      </template>
    </pro-table>
  </div>
</template>

<script setup lang="ts">
  import { NButton, NSpace } from 'naive-ui'
  import { useBasicProTable } from './useBasicProTable'

  const { proTableInst, query, columns } = useBasicProTable()

  const data = () => {
    const data: any[] = []
    for (let index = 0; index < 50; index++) {
      data.push({
        key1: '我是普通列',
        key2: '我能自定义列属性',
        key3: `https://www.baidu.com`,
        key4: 100,
        key5: 100,
        key6: true,
        key7: Date.now()
      })
    }
    return data
  }

  const fetchPageList = async (pages, queryParams) => {
    try {
      console.log(pages)
      console.log(queryParams)

      // const res = await pageListApi({
      //   pageRequest: pages,
      //   ...queryParams
      // })

      return {
        data: data(),
        total: 100
      }
    } catch (e) {
      console.log(e)
    }
  }

  const tableReload = () => {
    proTableInst.value?.reload()
  }
</script>

<style lang="less" scoped></style>
